<template>
	<div>
		<div v-if="lineChartShow" style="opacity: 0;">
			<LineChart v-if="lineChartShow" :scoreData="scoreData" @getEchartBase64URL="getEchartBase64" />
		</div>
		<img :src="imageUrl" alt="" mode="widthFix" style="width: 100%;" />
		<l-painter ref="painter" @done="onsave" custom-style="position: fixed; left: 200%">
			<l-painter-view css="background: #fff; padding-top: 10rpx;border-top:1rpx solid #eee;">
				<!-- 球队 -->
				<l-painter-view
					css="border-bottom:1rpx solid #eee;display:flex;align-items:center;justify-content:space-between;padding: 0 20rpx 10rpx">
					<!-- 头像 -->
					<l-painter-view css="display:flex;align-items:center;">
						<l-painter-image
							:src="personObj.playerAvatar ? imageUrlIcon + personObj.playerAvatar :'@/static/images/baskerballer.png'"
							css="width: 150rpx; height: 150rpx;" />
					</l-painter-view>
					<!-- 中间比赛双方 -->
					<l-painter-view css="padding: 20rpx 0 30rpx 0;background: #fff;text-align:center">
						<l-painter-view css="font-weight:bold;font-size: 34rpx;margin-bottom: 20rpx;">
							<l-painter-text :text="'比赛双方'"></l-painter-text>
						</l-painter-view>
						<!-- <l-painter-view css="font-size: 24rpx;">
							<l-painter-text :text="personObj.teamOneName"></l-painter-text>
							<l-painter-text :text="' ' +personObj.teamOneScore"></l-painter-text>
							<l-painter-text text=" - "></l-painter-text>
							<l-painter-text :text="personObj.teamTwoName"></l-painter-text>
							<l-painter-text :text="' ' +personObj.teamTwoScore"></l-painter-text>
						</l-painter-view> -->
						<l-painter-view css="font-size: 24rpx;width: 180rpx;">
							<l-painter-text :text="personObj.teamOneName+' ' +personObj.teamOneScore"></l-painter-text>
						</l-painter-view>
						<l-painter-view css="font-size: 34rpx;">
							<l-painter-text :text="'vs'"></l-painter-text>
						</l-painter-view>
						<l-painter-view css="font-size: 24rpx;width: 180rpx;">
							<l-painter-text :text="personObj.teamTwoName+' ' +personObj.teamTwoScore"></l-painter-text>
						</l-painter-view>
					</l-painter-view>
					<!-- 右边姓名球号字段显示区域 -->
					<l-painter-view css="font-size: 24rpx;">
						<l-painter-view css="border-bottom:1rpx solid #666;padding-bottom:6rpx;margin-bottom:10rpx;">
							<l-painter-text :text="'姓名：'+personObj.playerName"></l-painter-text>
						</l-painter-view>
						<l-painter-view css="border-bottom:1rpx solid #666;padding-bottom:6rpx;margin-bottom:10rpx;">
							<l-painter-text :text="'球号：'+personObj.playerNumber"></l-painter-text>
						</l-painter-view>
						<l-painter-view css="border-bottom:1rpx solid #666;padding-bottom:6rpx;margin-bottom:10rpx;">
							<l-painter-text :text="'GBPM评分值：'+personObj.gbpm"></l-painter-text>
						</l-painter-view>
						<l-painter-view css="border-bottom:1rpx solid #666;padding-bottom:6rpx;margin-bottom:10rpx;">
							<l-painter-text
								:text="'球队目前胜负：'+`胜${personObj.winNum||'0'}  负${personObj.loseNum||'0'}`"></l-painter-text>
						</l-painter-view>
						<l-painter-view css="">
							<l-painter-text :text="'球队目前排名：'+(personObj.teamRank||'')"></l-painter-text>
						</l-painter-view>
					</l-painter-view>
				</l-painter-view>
				<!-- 折线图走势 -->
				<l-painter-view css="background:#fff;padding-top: 30rpx;">
					<l-painter-image :src="callbackEchartBase64" css="width: 100%; height: 100%;" />
				</l-painter-view>
				<!-- 得分具体明细 -->
				<l-painter-view css="background:#fff;padding: 0 20rpx 20rpx;">
					<l-painter-view v-for="(item,index) in personObj.scoreListList" css="margin-bottom: 20rpx;">
						<l-painter-text
							css="background:#46424D;padding: 4rpx 16rpx;color:#fff;margin-bottom: 8rpx">{{item.subsection==1?'1st':item.subsection==2?'2nd':item.subsection==3?'3rd':item.subsection==4?'4th':'全场合计'}}</l-painter-text>
						<l-painter-view css="display:flex;flex-flow:row wrap">
							<l-painter-text css="margin-right: 30rpx">得分: {{item.score}}</l-painter-text>
							<l-painter-text css="margin-right: 30rpx">篮板: {{item.backboard}}</l-painter-text>
							<l-painter-text css="margin-right: 30rpx">助攻: {{item.assist}}</l-painter-text>
							<l-painter-text css="margin-right: 30rpx">抢断: {{item.steal}}</l-painter-text>
							<l-painter-text css="margin-right: 30rpx">盖帽: {{item.block}}</l-painter-text>
						</l-painter-view>
						<l-painter-view css="display:flex;flex-flow:row wrap">
							<l-painter-text css="margin-right: 30rpx">投篮: {{item.basket}}</l-painter-text>
							<l-painter-text css="margin-right: 30rpx">犯规: {{item.foul}}</l-painter-text>
							<l-painter-text css="margin-right: 30rpx">失误: {{item.mistake}}</l-painter-text>
							<l-painter-text :text="`二分命中率:${Math.ceil(item.twoPointRate*100)}%`"></l-painter-text>
						</l-painter-view>
						<l-painter-view css="display:flex;">
							<l-painter-text css="margin-right: 30rpx"
								:text="`三分命中率:${Math.ceil(item.threePointRate*100)}%`"></l-painter-text>
							<l-painter-text css="margin-right: 30rpx"
								:text="`罚球命中率:${Math.ceil(item.pointRate*100)}%`"></l-painter-text>
							<l-painter-text css="" :text="`真实命中率:${Math.ceil(item.rate*100)}%`"></l-painter-text>
						</l-painter-view>
					</l-painter-view>
				</l-painter-view>




				<!-- 底部描述栏 -->
				<l-painter-view css="background:#fff;padding: 40rpx; 20rpx;margin-top: 30rpx;">
					<l-painter-view css="display: felx;flex-direction: column;padding: 0 40rpx;">
						<l-painter-view css="background:#fff;padding: 20rpx;">
							<!-- <l-painter-qrcode text="http://m.yundongshugenmatch.cn"
								css="width: 200rpx; height: 200rpx;background:#fff;" /> -->
							<l-painter-qrcode :text="qcCodeUrl" css="width: 200rpx; height: 200rpx;background:#fff;" />
						</l-painter-view>

					</l-painter-view>
					<l-painter-view
						css="width: 320rpx;display: felx;flex-direction: column;justify-content:center;align-items:center;">
						<l-painter-view css="display:flex;">
							<l-painter-image src="@/static/logos.c5d75d8.png"
								css="width: 100%; height: 140rpx;border-radius: 50rpx;margin-bottom: 20rpx;" />
						</l-painter-view>
						<l-painter-text css="color:#000;font-size: 24rpx;text-align: center;width:100%;"
							text="本场球员数据报告由运动数根独家提供" />
					</l-painter-view>
				</l-painter-view>
			</l-painter-view>
		</l-painter>
	</div>
</template>

<script>
	import LineChart from "@/components/LineChart.vue";
	import {
		personalData
	} from '@/api/tournament/index.js'
	import {
		baseUrl
	} from '@/config.js'
	export default {
		components: {
			LineChart,
		},
		data() {
			return {
				imageUrlIcon: baseUrl + '/system/oss/preview/',
				imageUrl: '',
				personObj: {},
				// echarts
				scoreData: {},
				lineChartShow: false,
				callbackEchartBase64: '',
				qcCodeUrl: "",
			}
		},
		methods: {
			getReport(option) {
				personalData(option).then(res => {
					console.log('res', res)
					this.personObj = {
						...res.data,
						...{
							contestName: option.contestName
						}
					}
					this.scoreData = res.data.scoreMovementVO
					this.lineChartShow = true;
					uni.showLoading({
						title: '正在绘制，请稍候...'
					});
				})
			},
			//
			onsave() {
				setTimeout(() => {
					uni.hideLoading();
					this.$refs.painter.canvasToTempFilePathSync({
						fileType: "png",
						// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
						pathType: 'base64',
						quality: 1,
						success: (res) => {
							console.log('数据res', res.tempFilePath);
							this.imageUrl = res.tempFilePath
						},
					});
					this.lineChartShow = false;
				}, 2000)
			},
			getEchartBase64(e) {
				this.callbackEchartBase64 = e
			},
			getUserSource(key, list) {
				let data = list.find(item => item.type == key);
				let other;
				if (key == 1) {
					other = list.find(item => item.type == 5);
					return data.typeCount + '/' + (other.typeCount + data.typeCount)
				}
				if (key == 14) {
					other = list.find(item => item.type == 16);
					return data.typeCount + '/' + (other.typeCount + data.typeCount)
				}
				if (key == 2) {
					other = list.find(item => item.type == 6);
					return data.typeCount + '/' + (other.typeCount + data.typeCount)
				}
				return data.typeCount || '0'
			},
			getWidth() {
				return 100 / 11;
			},
			getSourceFen(item, key) {
				let source1 = this.teamCompareOne[key]
				let source2 = this.teamCompareTwo[key]

				let widthNum = (item / (source1 + source2)) * 100

				return widthNum == 0 ? 0.01 : widthNum;

			},
			getHeight(item, index) {
				let bigSource = this.bestOfTheGameOne[index].totalCount > this.bestOfTheGameTwo[index].totalCount ? this
					.bestOfTheGameOne[index].totalCount : this.bestOfTheGameTwo[index].totalCount;
				let indexSource = (item.totalCount / bigSource) * 100;
				return indexSource;

			},
		},
		computed: {
			teamOneScoresAsString() {
				return Object.values(this.teamOne.teamSubsectionScoreSum).map(String);
			},
			teamTwoScoresAsString() {
				return Object.values(this.teamTwo.teamSubsectionScoreSum).map(String);
			},
		},
		onLoad(option) {
			console.log('option', option)
			this.getReport(option)
			this.qcCodeUrl =
				`${location.origin}#/pages/index?id=${option.tournamentId}&name=${option.contestName}&img=${option.contestImg}`;
		}
	}
</script>

<style>
</style>